import React, { Component } from 'react'
import { Form, Input, Button, Checkbox, Radio, message } from 'antd'
import _ from 'lodash'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import { loginThunk, queryAddressThunk } from './ActionCreator'
import './index.css'
import { history } from '@/index'
import { CookieUtil } from '@/Utils/index'
import { setCookie } from '../../Utils/Cookie_'

const mapStateToProps = (state) => ({})
const mapDispatchToProps = (dispatch) => ({
  login: (...rest) => dispatch(loginThunk(...rest)),
  queryAddress: (...rest) => dispatch(queryAddressThunk(...rest)),
})

@connect(mapStateToProps, mapDispatchToProps)
class Login extends Component {
  state = {
    remember: true,
    telephone: '',
    password: '',
  }

  componentDidMount() {
    if (CookieUtil.get('userLoginMessage')) {
      let userLoginMessage = JSON.parse(CookieUtil.get('userLoginMessage'))
      this.setState({
        telephone: userLoginMessage.telephone,
        password: userLoginMessage.password,
      })
    }
  }

  onFinish = (e) => {
    const { password, telephone, roleId } = e
    this.debounceLogin({ password, telephone, roleId })
  }

  debounceLogin = _.debounce(
    function (e) {
      const { login, queryAddress } = this.props
      const { password, telephone, roleId } = e
      login(telephone, password, roleId).then((res) => {
        if (res.success) {
          // 将用户的信息存到localStorge里面
          CookieUtil.set(
            'userMessage',
            JSON.stringify(res.data),
            res.data.expire
          )
          setCookie({
            roleId: roleId,
          })
          if (this.state.remember) {
            let userLoginMessage = { telephone, password }
            CookieUtil.set('userLoginMessage', JSON.stringify(userLoginMessage))
          }
          queryAddress().then((res) => {})
          history.push('/homePage')
          message.success('登录成功')
        }
      })
    },
    1000,
    {
      leading: true,
      trailing: false,
    }
  )

  render() {
    return (
      <div id="login-page">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          colon={false}
          labelCol={{
            sm: {
              span: 6,
            },
          }}
          onFinish={this.onFinish}
        >
          <div className="login-title">登录</div>
          <Form.Item
            name="telephone"
            rules={[
              {
                required: true,
                message: '请输入电话号码',
              },
            ]}
            label="电话号码"
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入电话号码"
              style={{
                height: '40px',
              }}
              // value={this.state.telephone ? this.state.telephone : ''}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
            label="密码"
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
              style={{
                height: '40px',
              }}
              // value={this.state.password ? this.state.password : ''}
            />
          </Form.Item>

          <Form.Item
            name="roleId"
            label="团队职务"
            rules={[
              {
                required: true,
                message: '请选择团队职务',
              },
            ]}
          >
            <Radio.Group>
              <Radio.Button value="2">教师</Radio.Button>
              <Radio.Button value="3">管理员</Radio.Button>
              <Radio.Button value="4">超级管理员</Radio.Button>
            </Radio.Group>
          </Form.Item>

          <Form.Item>
            <Form.Item
              name="remember"
              valuePropName="checked"
              style={{ position: 'relative', left: '36%' }}
            >
              <Checkbox
                onChange={(e) => {
                  this.setState({
                    remember: e.target.checked,
                  })
                }}
              >
                记住我
              </Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button gg"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default Login
